<template>
  <div>
    <canvas
      ref="canvas"
      id="canvas"
      width="500"
      height="500"
      style="border: 1px solid #000; padding: 20px"
    ></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const canvas = ref<HTMLCanvasElement>()
onMounted(() => {
  // const ctx = document.getElementById('canvas')?.getContext('2d')
  const ctx = canvas.value?.getContext('2d')
  ctx?.moveTo(20, 20)
  ctx!.lineWidth = 10
  ctx!.strokeStyle = 'pink'
  ctx?.lineTo(100, 20)
  ctx?.stroke()

  // 直线
  ctx?.beginPath() // 开始路径
  ctx!.lineWidth = 20
  ctx!.strokeStyle = 'blue'
  ctx?.moveTo(40, 40)
  ctx?.lineTo(100, 40)
  ctx?.stroke()
  // 折线
  ctx?.beginPath() // 开始路径
  ctx!.lineWidth = 2
  ctx!.strokeStyle = 'green'
  ctx?.moveTo(60, 60)
  ctx?.lineTo(160, 100)
  ctx?.lineTo(260, 60)
  ctx?.lineTo(360, 100)
  ctx?.lineTo(460, 60)
  ctx?.stroke()

  // 矩形
  ctx?.beginPath()
  ctx!.lineWidth = 2
  ctx!.strokeStyle = 'skyblue'
  ctx?.rect(110, 110, 100, 100)
  ctx?.stroke()

  // 填充矩形
  ctx?.beginPath()
  ctx!.lineWidth = 2
  ctx!.strokeStyle = 'black'
  ctx!.fillStyle = 'red'
  ctx?.fillRect(110, 210, 100, 100)
  ctx?.stroke()
})
</script>

<style scoped lang="scss"></style>
